<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table2</title>
        <!--   <link rel="stylesheet" type="text/css" href="./layui/css/layui.css"> -->
        <!-- <script src="./layui/layui.js"></script> -->
        <link rel="stylesheet" type="text/css" href="layui\css\layui.css">
        <script src="layui\layui.js"></script>
        
    </head>
<body>
       <!-- 这种写法直接写html里面 -->
       <table class="layui-table" lay-data="{height:305, 
        url:'https://www.layui.com/demo/table/user/', 
        page:true,   
        id:'test2', 
        skin: 'row', 
        even: true}">
        <thead>
            <tr>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'username', width:80, templet: '#usernameTpl'}">用户名</th>
                <th lay-data="{field:'sex', width:80, sort: true, templet: '#sexTpl'}">性别</th>
                <th lay-data="{field:'city', width:80}">城市</th>
                <th lay-data="{field:'sign'}">签名</th>
                <th lay-data="{field:'experience', width:80, sort: true, style:'background-color: #eee;'}">积分</th>
                <th lay-data="{field:'score', width:80, sort: true}">评分</th>
                <th lay-data="{field:'classify', width:80, style:'background-color: #009688; color: #fff;'}">职业</th>
                <th lay-data="{field:'wealth', width:135, sort: true, templet: '#wealthTpl' }">财富</th>
            </tr>
        </thead>
    </table>

    <script type="text/html" id="usernameTpl">
        <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
      </script>
    <script type="text/html" id="sexTpl">
        {{#  if(d.sex === '女'){ }}
          <span style="color:pink;">{{ d.sex }}</span>
        {{#  } else { }}
        <span style="color:green;">  {{ d.sex }}</span>
        {{#  } }}
    </script>
    <script type="text/html" id="wealthTpl">

        {{#  if(d.wealth >50000000 ){ }} 
        <span style="color:purple">{{d.wealth}}</span> 
   
        {{#  }else{ }} 
        <span style='color:green'>{{d.wealth}}</span>
         {{#  } }} 
        
    </script>




    <script type="text/html" id="barDemo1">
        <a class="layui-btn layui-btn-xs" lay-event="edit">工具性按钮</a>
      </script>



    <script>
        layui.use('table', function () {
            var table = layui.table;
        });
    </script>

</body>
</html>